<template>
    <a-drawer :title="props.drawerRecord && props.drawerRecord.assessmentName+'&nbsp;&nbsp;共&nbsp;'+dataSource.length+'&nbsp;条数据'" width="1300" placement="right" 
        v-model:visible="drawerVisible">
        <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false" rowKey="id">
        <template #index="{ index }">
            {{ index + 1 }}
        </template>
        <template #sumstatus="{ record }">
            <span>
                <a-tag color="error" v-if="record.sumstatus == 0">未汇总</a-tag>
                <a-tag color="#87d068" v-if="record.sumstatus == 1">支部汇总</a-tag>
                <a-tag v-if="record.sumstatus == 2">分管领导汇总</a-tag>
                <a-tag v-if="record.sumstatus == 3">处理完毕</a-tag>
            </span>
        </template>
        <template #status="{ record }">
            <span>
                <a-tag color="error" v-if="record.status == -1">停用</a-tag>
                <a-tag color="#f50" v-if="record.status == 0">退回</a-tag>
                <a-tag color="#87d068" v-if="record.status == 1">待提交</a-tag>
                <a-tag color="#2db7f5"  v-if="record.status == 2">部门领导</a-tag>
                <a-tag color="#2db7f5" v-if="record.status == 3">分管领导</a-tag>
                <a-tag color="#2db7f5" v-if="record.status == 100">处理完毕</a-tag>
            </span>
        </template>

        <!-- <template #action="{ record }">
            <span>
                <a-tag color="#108ee9" 
                    style="cursor: pointer;" >详情</a-tag>
            </span>
        </template> -->

    </a-table>
    </a-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { GetEmployeeViewDetails } from "@/api/main"
const dataSource = ref([])
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align:"center",
        slots: { customRender: 'index' },
    },
    {
        title: '姓名',
        dataIndex: 'empname',
        key: 'empname',
         align:"center"
    },
    {
        title: '职务',
        dataIndex: 'duty',
        key: 'duty',
         align:"center"
    },
    {
        title: '部门名称',
        dataIndex: 'orgName',
        key: 'orgName',
         align:"center"
    },
    {
        title: '个人评分',
        dataIndex: 'selfScore',
        key: 'selfScore',
         align:"center"
    },
    {
        title: '部门评分',
        dataIndex: 'departmentScore',
        key: 'departmentScore',
         align:"center"
    },
    {
        title: '支部评分',
        dataIndex: 'secretaryScore',
        key: 'secretaryScore',
         align:"center"
    },
    {
        title: '分管领导评分',
        dataIndex: 'departmentHeadScore',
        key: 'departmentHeadScore',
         align:"center"
    },
    {
        title: '汇总状态',
        dataIndex: 'sumstatus',
        key: 'sumstatus',
        slots: { customRender: 'sumstatus' },
         align:"center"
    },
    {
        title: '流程状态',
        dataIndex: 'status',
        key: 'status',
        slots: { customRender: 'status' },
    },
    // {
    //     title: '操作',
    //     dataIndex: 'action',
    //     key: 'action',
    //     align: "center",
    //     slots: { customRender: 'action' },
    // },
]
const drawerVisible = ref<boolean>(false);
const props = defineProps(["drawerRecord"]);
const detailsGetData = () => {
    setTimeout(() => {
        GetEmployeeViewDetails({
            summaryId: props.drawerRecord.id
        }).then((response: any) => {
            dataSource.value = response.data
        })
    }, 500)
}
defineExpose({ drawerVisible, detailsGetData });
</script>